<template>
  <div class="wa-data-card wa-posr wa-card">
    <h3 :style="{backgroundColor:bgColor}" class="wa-posa">{{ title }}</h3>
    <div class="wa-data-total">
      <span class="wa-mr10">{{ target }}</span>
      <el-text size="large" :type="rote>0?'success':'danger'">{{ (rote > 0 ? '+' : '') + rote }}%</el-text>
    </div>
    <el-text type="warning" class="wa-mr5">{{ subTitle }}</el-text>
    <el-text type="info" size="large">{{ contrast }}</el-text>
  </div>
</template>

<script setup>

import {defineProps} from 'vue'

const props = defineProps({
  bgColor: {
    type: String,
    default: ' #7dcaf7'
  },
  title: {
    type: String,
    required: true
  },
  subTitle: {
    type: String,
    default: '昨日',
  },
  target: {
    type: Number,
    required: true
  },
  contrast: {
    type: Number,
    required: true
  }
})

const rote = ((props.target - props.contrast) * 100 / props.target).toFixed(2)

</script>

<style lang="less" scoped>

@card-height: 100px;
@text-color: #303133;
.wa-data-card {
  height: @card-height;
  margin-right: 20px;
  padding: 20px 20px 20px 240px;
  box-sizing: border-box;
  color: @text-color;

  .wa-data-total {
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }

  h3 {
    top: 0;
    left: 0;
    width: 200px;
    text-align: center;
    color: #fff;
    height: @card-height;
    line-height: @card-height;
    margin: 0;
    font-weight: normal;
    font-size: 26px;
  }
}
</style>